<!DOCTYPE html>
<!--[if (gte IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
    <!-- Basic Page Needs
================================================== -->
    <meta charset="utf-8">
    <title>Shopholic</title>
    <!-- SEO Meta
================================================== -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="distribution" content="global">
    <meta name="revisit-after" content="2 Days">
    <meta name="robots" content="ALL">
    <meta name="rating" content="8 YEARS">
    <meta name="Language" content="en-us">
    <meta name="GOOGLEBOT" content="NOARCHIVE">
    <!-- Mobile Specific Metas
================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- CSS
================================================== -->
    <link rel="stylesheet" type="text/css" href="css/custom.css?v=1.3">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="css/responsive.css?v=1.3">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
    <style>
        .upimg {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 5px;
            border: dashed #999999;
            background: url(images/addimg.svg) no-repeat;
            background-position: 33px;
        }

        .upimg input {
            position: absolute;
            width: 100px;
            height: 100px;
            opacity: 0;
        }

        #imgList {
            display: flex;
            justify-content: flex-start;
        }

        #imgList li {
            width: 150px;
            height: 150px;
            position: relative;
            overflow: hidden;
            display: inline-block;
            margin-right: 5px;
        }

        #imgList li img.showimg {
            position: absolute;
            text-align: center;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 6;
        }

        .showdiv {
            position: absolute;
            z-index: 9;
            bottom: 0;
            width: calc(100% - 20px);
            padding: 10px;
            display: flex;
            justify-content: space-around;
            background: rgba(0, 0, 0, .6);
        }

        .showdiv img {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

        #imgList li:first-child img.left {
            opacity: .6;
            cursor: no-drop;
        }

        #imgList li:last-child img.right {
            opacity: .6;
            cursor: no-drop;
        }

        .oneright {
            opacity: .6;
            cursor: no-drop !important;
        }
    </style>
</head>

<body>
<div class="se-pre-con"></div>
<div class="main">

    <script type="text/javascript" src="js/head.js"></script>

    <!-- Bread Crumb STRAT -->
    <div class="baFnner inner-banner1">
        <div class="container">
            <section class="banner-detail center-xs d-flex justify-content-between align-items-center">
                <h1 class="banner-title">发布商品</h1>
                <div class="bread-crumb right-side float-none-xs">
                    <ul>
                        <li>
                            <a href="index.html"><i class="fa fa-home"></i>主页</a>/
                        </li>
                        <li><span>发布商品</span></li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
    <!-- Bread Crumb END -->

    <!-- CONTAIN START -->
    <section class="ptb-60">
        <div class="container">
            <form id="releaseForm"  method="get">
                <div class="form-group">
                    <label for="goodsName">商品名称</label>
                    <input type="text" class="form-control" name="goodsName" id="goodsName" placeholder="商品名称">
                </div>
                <div class="form-group">
                    <label for="goodsPrice">商品价格</label>
                    <input type="number" class="form-control" name="goodsPrice" id="goodsPrice" placeholder="商品价格">
                </div>
                <div class="form-group">
                    <label for="goodsNum">商品数量</label>
                    <input type="number" class="form-control" name="goodsNum" id="goodsNum" placeholder="商品数量">
                </div>
                <div class="form-group">
                    <label for="sorts">商品分类</label>
                    <div class="input-box select-dropdown" id="sorts">
                        <fieldset>
                            <select name="goodsSorts" class="option-drop" id="goodsSorts">

                            </select>
                        </fieldset>
                    </div>
                </div>
                <div class="form-group">
                    <label for="showimg">商品图片</label>
                    <div class="col-sm-10">
                        <div id="showimg">
                            <ul id="imgList">

                            </ul>
                            <div id="showinput">

                            </div>
                        </div>
                        <div class="upimg">
                            <input type="file" name="goodsImage" id="upgteimg" value="" multiple/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="goodsDesc" class="col-form-label">商品详情</label>
                    <div id="goodsDesc">

                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-10">
                        <button type="button" id="submit" class="btn btn-primary">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <!-- CONTAINER END -->

    <!-- FOOTER START -->
    <script type="text/javascript" src="js/foot.js"></script>
    <!-- FOOTER END -->
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.downCount.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/fotorama.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/wangEditor.min.js"></script>
<script src="js/updateimg.js"></script>
<script>
    $(function () {
        $("#submit").click(function () {
            $.ajax({
                url:"/AddGoodsServlet",
                type:"post",
                dataType: "json",
                data:{
                    goodsName: $("#goodsName").val(),
                    price:$("#goodsPrice").val(),
                    goodsnum:$("#goodsNum").val(),
                    sortsId:$("#sortsId").val(),
                    image:$("#submit").val(),
                    goodsContent:$("#goodsDesc").val()
                },
                success:function (data) {
                    alert("添加成功")
                }
            })
        })

    })

    $(function () {
        createEditor();

        /*创建富文本编辑器*/
        function createEditor() {
            var E = window.wangEditor
            var editor = new E('#goodsDesc');
            editor.create();
        };

        $("#submit").click(function () {
            console.log($("#goodsDesc").html());
            console.log($("#upgteimg")[0].files);
        })
    });

    $(function () {
        $.ajax({
            url: "sorts/ShowSortsServlet",
            type: "Post",
            dataType: "json",
            success: function (ret) {
				$.each(ret, function (index, item) {
                    $option = "<option value = '" + item.sortsId + "' name='"+item.sortsId+"'>" + item.sortsName + "</option>";
					$("#goodsSorts").append($option);
                })
                $("#goodsSorts option").eq(0).prop("selected",true);
            }
        })
    });
</script>
</body>

</html>